<template>
    <div id="background">
        <div id="logo">图书借阅系统</div>
        <div id="admin">
            <el-button type="text" size="mini" @click="admin"><i class="el-icon-s-custom"></i>管理员登录</el-button>
        </div>
        <div id="card">
            <el-card class="box-card">
                <div id="form">
                    <el-input v-model="username" placeholder="请输入账号"></el-input>
                    <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
                    <div id="button">
                        <el-button type="primary" size="small" @click="login">登录</el-button>
                        <el-button type="text" size="mini" @click="regist">注册账号</el-button>
                    </div>
                </div>
            </el-card>
        </div>
        <div id="clock">
            <div id="time">{{ time }}</div>
            <div id="date">{{ date }}</div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data () {
        return {
            username:"",
            password:"",
            time:"",
            date:""
        }
    },
    methods:{
        update_clock:function(){
            var d = new Date();
            var year = d.getFullYear();
            var mon = d.getMonth()+ 1;            
            var day = d.getDate();            
            var hour = d.getHours();            
            var minu = d.getMinutes();
            var sec = d.getSeconds();
            if(year<10){
                year = "0" + year;
            }
            if(mon<10){
                mon = "0" + mon;
            }
            if(day<10){
                day = "0" + day;
            }
            if(hour<10){
                hour = "0" + hour;
            }
            if(minu<10){
                minu = "0" + minu;
            }
            if(sec<10){
                sec = "0" + sec;
            }
            this.time = hour + ":" + minu + ":" + sec;
            this.date = year + "/" + mon + "/" + day;            
        },

        login:function(){
            if(this.username == "" || this.password == ""){
                this.$message.warning("账号密码不能为空")
                return;
            }
            axios.get(this.url + "/user/login",{
                params:{
                    username:this.username,
                    password:this.password
                }
            }).then((res) => {
                if(res.data.code == 1){
                    this.$message.success("登录成功")
                    //存储jwt令牌

                    //存储登录信息 id username
                    localStorage.setItem("id",res.data.data.id)
                    localStorage.setItem("username",res.data.data.username)
                    this.$router.replace({
                        path:"/index",
                    });
                }else{
                    this.$message.error(res.data.msg)
                }
            }).catch(() => {
                this.$message.error('未知错误登陆失败')
            });
        },

        regist:function() {
            this.$router.push("/regist")     
        },

        admin:function(){
            this.$router.push("/admin")
        }
    },
    mounted(){
        this.update_clock()
        /* 一秒调用一次 */
        this.$nextTick(()=>(
            setInterval(this.update_clock,1000)
        ));
    }
}
</script>

<style scoped>
    #background{
        position: fixed;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0%;
        background-image: url("../../assets/image/adminlogin.png");
        background-size: cover;
    }

    #logo{
        color: aliceblue;
        font-size: 25px;
        font-weight: 800;
        position: absolute;
        left: 10%;
        top: 10%;
    }

    #admin{
        position: absolute;
        right: 5%;
        top: 5%;
    }

    #card{
        position: absolute;
        left: 35%;
        top: 35%;
    }

    #form{
        line-height: 60px;
        padding-left: 15px;
        padding-right: 15px;
    }

    #button{
        position: absolute;
        right: 10%;
    }

    .el-card{
        width: 373px;
        height: 210px;
        background-color: rgb(255,255,255,0.4);
        border-radius: 15px;
    }
    
    #clock{
        color: aliceblue;
        position: absolute;
        top:70%;
        left: 10%;
        text-align: left;
    }

    #time{
        font-size: 85px;
    }

    #date{
        font-size: 35px;
    }
</style>